<template>
  <!-- 官网例子 -->
  <div>
    <div class="field is-grouped is-grouped-multiline">
      <p class="control">
        <button type="button"
                class="button"
                @click="add"
                :disabled="images.length===10">Add</button>
      </p>
      <p class="control">
        <button type="button"
                class="button"
                @click="remove"
                :disabled="images.length===0">Remove</button>
      </p>
      <p class="control">
        <button type="button"
                class="button"
                @click="show">Show</button>
      </p>
      <div class="field has-addons">
        <p class="control">
          <button type="button"
                  class="button is-primary"
                  @click="toggleToolbar(true)"
                  :class="{' is-active': options.toolbar}">Show Toolbar</button>
        </p>
        <p class="control">
          <button type="button"
                  class="button is-primary"
                  @click="toggleToolbar(false)"
                  :class="{' is-active': !options.toolbar}">Hide Toolbar</button>
        </p>
      </div>
    </div>
    <p>
      To show the viewer, you can click these images too.
    </p>
    <!-- 指令形式 -->
    <div v-viewer="options"
         class="images clearfix">
      <template v-for="{source, thumbnail} in images">
        <img :src="thumbnail"
             :data-source="source"
             class="image"
             :key="source"
             :alt="source.split('?image=').pop()">
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
const sourceImages: any[] = []
const base = Math.floor(Math.random() * 60) + 10
for (let i = 0; i < 10; i++) {
  sourceImages.push({
    thumbnail: `https://picsum.photos/id/${base + i}/346/216`,
    source: `https://picsum.photos/id/${base + i}/1440/900`
  })
}
interface optionParam {
  toolbar: boolean,
  url: string,
  [key: string]: any
}
@Component({
  name: 'viewerImg'
})
export default class extends Vue {
  private options:optionParam = {
    toolbar: true,
    url: 'data-source'
  }

  private images = [...sourceImages].splice(0, 5)
  toggleToolbar (toolbar: boolean) {
    // this.options = Object.assign({}, this.options, {toolbar})
    this.options.toolbar = toolbar
  }

  add () {
    this.images.push(sourceImages[this.images.length])
  }

  remove () {
    this.images.pop()
  }

  show () {
    const viewer = (this.$el.querySelector('.images') as any).$viewer
    viewer.show()
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.image {
  width: calc(20% - 10px);
  cursor: pointer;
  margin: 5px;
  display: inline-block;
}
</style>
